<template>
  <div id="dynamicTemp">
    <div class="right">
      <p class="username">
        <span>{{ dynamicData.username }}</span>
        <span>发表了新动态</span>
      </p>
      <p class="title">{{ dynamicData.title }}</p>
      <p class="content">{{ dynamicData.content }}</p>
      <p class="creationTime">
        <span> {{ year }}年{{ month }}月{{ day }}日 </span>
        <router-link to="/details">
          <span @click="setData">查看详情</span>
        </router-link>
      </p>
    </div>
    
  </div>
</template>

<script>
import "../assets/style/default.css";
export default {
  name: "dynamicTemp",
  //动态的具体内容
  props: ["dynamicData",'func'],
  data() {
    return {
      //标题
      title: "",
      //内容
      content: "",
      //作者
      username: "",
      //发表时间
      creationTime: ""
    };
  },
  computed: {
    //获取年月日
    year: function(params) {
      return this.dynamicData.creationTime.slice(0, 4);
    },
    month: function(params) {
      return this.dynamicData.creationTime.slice(5, 7);
    },
    day: function() {
      return this.dynamicData.creationTime.slice(8, 10);
    }
  },
  mounted() {
    //初始化数据 用于渲染页面
    this.update(this.dynamicData);
  },
  methods: {
    //点击查看详情 将动态的数据放在储存里 方便detail组件读取
    setData() {
      sessionStorage.setItem("data", JSON.stringify(this.dynamicData));
      sessionStorage.setItem("func",this.func)

    },
    // 当navBtn组件更新页码时 index组件调用 data:每个模板的动态数据
    update(data) {
      //动态的标题
      this.title = data.title;
      //动态内容
      this.content = data.content;
      //动态的作者
      this.username = data.username;
      //动态的发表时间
      this.creationTime = data.creationTime;
      console.log(data);
    }
  }
};
</script>

<style  scoped>
#dynamicTemp {
  width: 63.7rem;
  height: 8rem;
  display: flex;
  padding: 2rem 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgb(229, 229, 229);
  /* background: lightyellow; */
}
.left {
  width: 4rem;
  height: 4rem;
  margin-right: 2rem;
  background: pink;
}
.username span:nth-child(1) {
  font-weight: bold;
}
.username span:nth-child(2) {
  color: rgb(157, 157, 157);
}
.title {
  margin-top: 1rem;
  font-size: 1.2rem;
  /* font-weight: bold; */
}
.content {
  width: 55rem;
  margin: 0.5rem 0 1.2rem;
  font-size: 0.8rem;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* background: coral; */
}
.creationTime span {
  margin-right: 2rem;
  color: rgb(157, 157, 157);
}
.creationTime a span {
  color: #0066ff;
}
</style>